<template>
    <div class="index_page">
        <ul class="gift_send_pro">
            <li v-for="item in step_list" v-bind:class="{ active: item.is_active==true, current_active:item.value==now_step }">
                <img v-bind:src="item.is_active==true?item.active_img:item.normal_img">
                <p v-text='item.name'></p>
            </li>
        </ul>
        <div v-show='now_step==0'>
            <ul class="gift_send_item">
                <li>
                    <span>礼包赠送人数</span>
                    <div class="right_wrap">
                        <span class="icon_num_edit" @click="postOrderCount('user_count','minus')">
                            <img src="~assets/images/jian.png" alt="">
                        </span>
                        <span class="num_wrap"  v-text='order_data.user_count'>
                        </span>
                        <span class="icon_num_edit" @click="postOrderCount('user_count','plus')">
                            <img src="~assets/images/jia-hong.png" alt="">
                        </span>
                    </div>
                </li>
                <li>
                    <span>每人领取数量</span>
                    <div class="right_wrap">
                        <span class="icon_num_edit" @click="postOrderCount('limit_number','minus')">
                            <img src="~assets/images/jian.png" alt="">
                        </span>
                        <span class="num_wrap" v-text="order_data.limit_number">
                        </span>
                        <span class="icon_num_edit" @click="postOrderCount('limit_number','plus')">
                            <img src="~assets/images/jia-hong.png" alt="">
                        </span>
                    </div>
                </li>
            </ul>
            <div class="gift_send_other">
                <p>赠言</p>
                <textarea name="" placeholder="输入您想说的话......" v-model="order_data.words"></textarea>
            </div>
            <div class="confirm_btn" @click="postStepChange(0);">
                下一步
            </div>
        </div>
        <div v-show='now_step==1'>
            <div class="common_wrap">
                <div class="title">礼包详情</div>
                <div class="ul_wrap gift_wrap">
                    <ul>
                        <li>
                            <div class="left_img">
                                <div class="img_wrap">
                                    <img :src="resource_data.image | renderImg">
                                </div>
                                
                            </div>
                            <div class="main_content">
                                <div class="main_item top_item">
                                    <div class="left_title" v-text="resource_data.name">
                                    </div>
                                    <div class="ali">
                                        赠送给
                                        <span v-text="order_data.user_count"></span>人
                                    </div>
                                </div>
                                <div class="main_item bottom_item">
                                    <div class="left_des" v-if="resource_data.SKU_list">
                                        <span v-for="item in resource_data.SKU_list" v-text="item.content"></span>
                                    </div>
                                    <div class="left_des" v-if="!resource_data.SKU_list">
                                        规格：默认
                                    </div>
                                    <div>
                                        每人<span v-text="order_data.limit_number"></span>份
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li style="padding: 0">
                            <div class="main_content">
                                <div class="main_item top_item">
                                    <div>
                                        商品总价：
                                        <span class="red_span">￥<i v-text="resource_data.actual_price/100"></i></span>
                                    </div>
                                    <div class="ali">
                                        商品数量
                                        <span class="red_span">X <span v-text="countAllCount"></span></span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="half_confirm_btn ">
                <div class="half_confirm_wrap">
                    <div style="width: 50%">
                        合计：
                        <span class="red_span">￥<i v-text="countAllPrice/100"></i></span>
                    </div>
                    <div class="buy_btn" @click='postOrderAdd();'>
                        结算
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import api from '@/api/api'
export default {
    name: 'giftSend',
    data() {
        return {
            default_img: require('assets/images/watch.jpg'),
            now_step: 0,
            resource_data: {},
            order_data: {
                limit_number: 1,
                buy_count: 1,
                user_count: 1,
                words: '',
                sku_id_list: []
            },
            order_success_data: {},
            step_list: [
                {
                    name: '1.填写信息',
                    value: 0,
                    is_active: true,
                    active_img: require('assets/images/icon_write.png'),
                    normal_img: require('assets/images/icon_write.png')
                },
                {
                    name: '2.确认信息',
                    value: 1,
                    is_active: false,
                    active_img: require('assets/images/icon_confirms.png'),
                    normal_img: require('assets/images/icon_confirm.png')
                },
                {
                    name: '3.赠送礼物',
                    value: 2,
                    is_active: false,
                    active_img: require('assets/images/icon_givings.png'),
                    normal_img: require('assets/images/icon_giving.png')
                }
            ]
        }
    },
    methods: {
        postStepChange: function (val) {
            this.now_step += 1;
            this.step_list[val + 1].is_active = true;
        },
        jump: function () {
            this.$router.push('/gift/share');
            //window.location.href = '/gift/share'
        },
        postUpdate: function () {
            this.$store.commit('increment', 10);
            this.$store.dispatch('pretendLogin');
        },
        getResourceList: function () {
            let list_params = {
                functioncode: 'SCT0004',
                id: this.$route.params.id
            };
            let _self = this;
            api.get(list_params).then((res) => {
                if (res.data.returncode == '000000') {
                    _self.resource_data = res.data.record[0];
                    if(_self.resource_data.SKU_list){
                        _self.resource_data.sku_id_list = _self.resource_data.SKU_id_list;
                    }else{
                        _self.resource_data.sku_id_list = '';
                    }
                }
            });
        },
        postResourceAdd: function () {
            let add_params = {
                functioncode: 'article_add',
                org_id: 'lll',
                title: 'test',
                image: 'lll',
                article_type: 'hdhdh',
                team_id: '26235843f9373aa65e6144a8b308d234cecc8463',
                content: '26235843f9373aa65e6144a8b308d234cecc8463',
                group_id: ''
            };

            api.post(add_params).then(function (res) {
                if (res.returncode === '000000') {
                    alert('666')
                }
            });
        },
        //数量修改
        postOrderCount: function (type, mana_type) {
            if (type == 'user_count') {
                if (mana_type == 'minus') {
                    if (this.order_data.user_count == 1) {
                        return;
                    }
                    this.order_data.user_count--;
                } else {
                    this.order_data.user_count++;
                }
            }
            if (type == 'limit_number') {
                if (mana_type == 'minus') {
                    if (this.order_data.limit_number == 1) {
                        return;
                    }
                    this.order_data.limit_number--;
                } else {
                    this.order_data.limit_number++;
                }
            }
        },
        postOrderAdd: function () {
            let order_params = {
                functioncode: 'gift_order_add',
                resource_id: this.resource_data.resource_id,
                resource_type: 45,
                sku_id_list: this.resource_data.sku_id_list,
                team_id: this.team_id,
                mp_id: this.mp_id,
                buy_count: this.countAllCount,
                limit_number: this.order_data.limit_number,
                words: this.order_data.words,
                user_id: this.user_id,
                balance: 0
            }
            if (this.browser_type == 1) {
                order_params.pay_way = 4;
            } else {
                order_params.pay_way = 0;
            }
            var _self = this;
            api.post(order_params).then(function (res) {
                if (res.data.returncode == '000000') {
                    _self.order_success_data = res.data.record;
                    /*let pay_url = '';
                    if (order_success_data.pay_state == 1) {
                        _self.$router.push({
                            name: 'gift_share',
                            params: { order_id: order_success_data.resource_id }
                        });
                        return;
                    }
                    if (order_success_data.price != 0) {
                        if (_self.wx_pay_way == 'special_self' || _self.wx_pay_way == 'special_sub') {
                            pay_url = _self.current_host + "/mp/order/pay/" + order_success_data.id + '?from=mallsend';
                        } else {//统一支付逻辑
                            pay_url = _self.unified_pay_host + "/mp/common/wxpay/order/" + order_success_data.id + '?from=mallsend';
                        }
                    } else {
                        _self.$router.push({
                            name: 'gift_share',
                            params: { order_id: order_success_data.resource_id }
                        });
                    }
                    window.location.replace(pay_url);*/
                    _self.postShoopingCartRemove();

                }
            });
        },
        postShoopingCartRemove:function(){
            let remove_params = {
                functioncode: 'SCT0003',
                id_list: JSON.stringify([this.$route.params.id]),
            };
            let _self = this;
            api.post(remove_params).then(function (res) {
                if (res.data.returncode == '000000') {
                    let pay_url = '';
                    if (_self.order_success_data.pay_state == 1) {
                        _self.$router.push({
                            name: 'gift_share',
                            params: { order_id: _self.order_success_data.resource_id }
                        });
                        return;
                    }
                    if (_self.order_success_data.actual_price != 0) {
                        if (_self.wx_pay_way == 'special_self' || _self.wx_pay_way == 'special_sub') {
                            pay_url = _self.current_host + "/mp/order/pay/" +  _self.order_success_data.id + '?from=mallsend';
                            //alert(pay_url + '1111');
                            //alert(_self.current_host);
                        } else {//统一支付逻辑
                            pay_url = _self.unified_pay_host + "/mp/common/wxpay/order/" +  _self.order_success_data.id + '?from=mallsend';
                            //alert(pay_url + '222')
                        }
                    } else {
                        _self.$router.push({
                            name: 'gift_share',
                            params: { order_id:  _self.order_success_data.resource_id }
                        });
                    }
                    window.location.replace(pay_url);
                }
            });

        }
    },
    computed: {
        ...mapState({
            count: state => state.count,
            is_login: state => state.is_login
        }),
        countAllCount: function () {
            return this.order_data.limit_number * this.order_data.user_count;
        },
        countAllPrice: function () {
            return this.countAllCount * this.resource_data.actual_price;
        },
    },
    mounted: function () {
        this.$nextTick(function () {
            this.getResourceList();
        });

        //this.postResourceAdd();
    },
}
</script>

<style scoped>
body {
    background: #f2f2f2;
    margin: 0;
}
</style>
